<template>
  <div class="audit">
    <head-top head-title="发单订单" go-back="true"></head-top>
    <div class="audit_main">
      <ul>
        <li v-for="(b,bill) in billList" :key="bill">
          <div class="order-number">
            <span>状态：</span>
            <span>已发单</span>
          </div>
          <div class="order-content" @click="$router.push('/my/OrderDetail/'+b.id)">
            <h2>{{b.title}}</h2>
            <p>截止时间：{{b.end_time * 1000 | dateFmt(('YYYY-MM-DD'))}}</p>
            <p>查验地址：{{b.address}}</p>
          </div>
          <div class="order-btn">
            <button @click="$router.push('/my/OrderIssue2/'+b.id)">编辑</button>
          </div>
        </li>
        <li v-if="flag&&billList.length === 0" class="no_data">
          <img src="../../../assets/default.png" alt="" width="100" height="100">
          <p>抱歉！暂无数据</p>
        </li>
        <li v-if="noDataShow" class="no_data">
          <img src="../../../assets/default.png" alt="" width="100" height="100">
          <p>抱歉！暂无数据</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import headTop from '../../../components/header/Header'
  import { billList } from '../../../api/MyOrder'

  export default {
    name: 'Bill',
    data () {
      return {
        billList: [],
        flag: false, // 标识：用于判断没有数据时候的显示
        noDataShow: false // 用于code为400时候显示
      }
    },
    // 设置从哪个页面回来（停留在点击进入详情页时的位置）
    beforeRouteEnter: (to, from, next) => {
      if (from.name === 'OrderDetail') {
        to.meta.isBack = true
      }
      next()
    },
    activated () {
      if (!this.$route.meta.isBack) {
        this._billList()
      }
      this.$route.meta.isBack = false
    },
    created () {
      this._billList()
    },
    methods: {
      _billList () {
        billList().then(res => {
          // console.log(res)
          if (res.code === 200) {
            // reverse：颠倒数组元素的顺序
            this.billList = res.data.reverse()
            this.flag = true
          }
          if (res.code === 400) {
            this.noDataShow = true
          }
        })
      },
      editOrder () {
        this.$router.push('/my/OrderIssue2')
      }
    },
    components: {
      headTop
    }
  }
</script>

<style lang="scss" scoped>
  .audit {
    padding-top: 50px;
    .audit_main {
      ul {
        li {
          border-bottom: 10px solid #f2f2f2;
          padding: 10px;
          .order-number {
            align-items: center;
            font-size: 14px;
            border-bottom: 1px solid #d9d9d9;
            padding: 2px 0 7px 0;
            span:first-child {
              color: #666666;
            }
            span:last-child {
              color: #2585d0;
            }
          }
          .order-content {
            h2 {
              font-weight: normal;
              color: #292929;
              font-size: 15px;
              padding-top: 10px;
            }
            p {
              font-size: 14px;
              color: #666666;
              padding-top: 10px;
            }
          }
          .order-btn {
            button {
              width: 100%;
              padding: 10px;
              background: #ffffff;
              border: 1px solid #bfbfbf;
              border-radius: 5px;
              outline: none;
              font-size: 15px;
              color: #292929;
              margin-top: 10px;
            }
          }
        }
        li:last-child {
          border-bottom: none;
        }
        .no_data {
          width: 100%;
          text-align: center;
          color: #0b7ad9;
          font-size: 14px;
          img {
            padding-top: 20px;
          }
          p {
            margin-top: 5px;
          }
        }
      }
    }
  }
</style>
